[#include "/common/macro/header.ftl" /]
[@header title="教室管理" /]
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <form class="layui-form" action="" lay-filter="LAY-pla-classroom-list-filter-form">
                        <div style="margin-bottom: 10px;">
                            <div class="layui-form-item">
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input" placeholder="教室编号/教室名称" name="keyword">
                                </div>
                                <div class="layui-input-inline">
                                    <script type="text/html" template>
                                        <select name="type">
                                            <option value="">教室类型...</option>
                                            {{# for (var i in roomType) { }}
                                            <option value="{{ i }}">{{ roomType[i] }}</option>
                                            {{# } }}
                                        </select>
                                    </script>
                                </div>

                                <div class="LAY-list-btns">
                                    <button class="layui-btn layui-btn-primary" lay-submit
                                            lay-filter="LAY-pla-classroom-list-filter-form-query"><i
                                            class="layui-icon">&#xe615;</i>查询
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                        <div class="LAY-list-btns" style="margin-bottom: 10px;">
                            <button class="layui-btn layui-btn-sm layui-btn-normal" data-events="add">
                                <i class="layui-icon">&#xe654;</i>添加
                            </button>
                        </div>
                    <table id="LAY-classroom-table" lay-filter="LAY-classroom-table"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="LAY-classroom-table-bar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="apply">申请</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="repair">报修</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="returnRoom">归还教室</a>
</script>

<script src="${base}/static/js/common.js"></script>
<script type="text/javascript" charset="utf-8" src="${base}/static/js/jquery.min.js"></script>
<script src="${base}/static/layuiadmin/layui/layui.js"></script>
<script src="${base}/static/js/preloadjs.min.js"></script>
<script src="${base}/static/js/jquery.img-uploader.js"></script>
<script src="${base}/static/select2-master/js/select2.min.js"></script>


<script>

    var roomType = {
        'Laboratory': '实验室',
        'MULTI_MEDIA': '多媒体教室',
        'MUSIC_ROOM': '音乐教室',
        'STYDY_ROOM': '自习室',
        'MEETING_ROOM': '会议室'
    };

    layui.config({
        base: '${base}/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'form'], function () {
        var $ = layui.$
                , admin = layui.admin
                , setter = layui.setter
                , response = setter.response
                , table = layui.table
                , view = layui.view
                , form = layui.form;

        table.render({
            elem: '#LAY-classroom-table'
            , url: '/admin/classroom'
            , response: {
                statusCode: 20000 //成功的状态码，默认：0
            }
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度
            , page: true
            , cols: [[
                {
                    field: 'id',
                    title: '教室ID',
                    sort: true
                }, {
                    field: 'roomNo',
                    title: '教室编号',
                    sort: true
                }, {
                    field: 'address',
                    title: '教室地址',
                    sort: true
                }, {
                    field: 'capacity',
                    title: '容纳人数',
                    sort: true
                }, {
                    field: 'status',
                    title: '状态',
                    sort: true
                }, {
                    title: '操作',
                    align: 'center',
                    fixed: 'right',
                    toolbar: '#LAY-classroom-table-bar',
                    unresize: true
                }
            ]]
        });

        //事件处理
        var events = {
            add: function (othis, type) {
                admin.popup({
                    id: 'LAY-popup-admin-add' //定义唯一ID，防止重复弹出
                    , area: ['800px', '80%']
                    , title: '新增教室'
                    , success: function () {
                        //将 views 目录下的某视图文件内容渲染给该面板
                        layui.view(this.id).render('device/classroom/add');
                    }
                    , end: function () {
                        table.reload('LAY-classroom-table'); //刷新表格
                    }
                });
            },
        };

        //监听工具条
        table.on('tool(LAY-classroom-table)', function (obj) {
            var data = obj.data;
            if (obj.event === 'apply') {
                layer.confirm('确定申请该教室吗？', function (index) {
                    admin.req({
                        url: '/admin/classroom/' + data.id + '/apply'
                        , type: 'post'
                        , contentType: "application/json"
                        , success: function (res) {
                            var statusCode = response.statusCode;
                            if (res[response.statusName] === statusCode.ok) {
                                layer.msg('申请成功', {
                                    icon: 1
                                });
                                table.reload('LAY-classroom-table'); //刷新表格
                            }
                        }
                    });
                    layer.close(index);
                });
            } else if (obj.event === 'repair') {
                layer.prompt({
                    formType: 2,
                    value: '',
                    title: '请输入问题描述',
                    area: ['800px', '350px'] //自定义文本域宽高
                }, function(value, index, elem){
                    admin.req({
                        url: '/admin/repair_records/' + data.id + '/save'
                        , type: 'post'
                        // , contentType: 'application/json'
                        , data: {"txt" : value}
                        , success: function (res) {
                            if (res[response.statusCode] === statusCode.ok) {
                                layer.msg('申请成功', {
                                    icon: 1
                                });
                            }
                        }
                    });
                   layer.close(index);
                    table.reload('LAY-classroom-table'); //刷新表格
                });
            } else if (obj.event === 'del') {
                layer.confirm('确定回收教室吗？', function (index) {
                    admin.req({
                        url: '${base}/admin/classroom/' + data.id
                        , type: 'delete'
                        , success: function (res) {
                            var statusCode = response.statusCode;
                            if (res[response.statusName] == statusCode.ok) {
                                layer.msg('回收成功', {
                                    icon: 1
                                });
                                table.reload('LAY-classroom-table'); //刷新表格
                            }
                        }
                    });
                    layer.close(index);
                });
            } else if (obj.event === 'returnRoom') {
                layer.confirm('确定回收教室吗？', function (index) {
                    admin.req({
                        url: '${base}/admin/classroom/' + data.id + '/return'
                        , type: 'put'
                        , contentType: 'application/json'
                        , success: function (res) {
                            var statusCode = response.statusCode;
                            if (res[response.statusName] == statusCode.ok) {
                                layer.msg('归还成功', {
                                    icon: 1
                                });
                                table.reload('LAY-classroom-table'); //刷新表格
                            }
                        }
                    });
                    layer.close(index);
                });
            }
        });

        $('.LAY-list-btns .layui-btn').on('click', function () {
            var othis = $(this)
                    , thisEvent = othis.data('events')
                    , type = othis.data('type');
            events[thisEvent] && events[thisEvent].call(this, othis, type);
        });

        form.on('submit(LAY-pla-classroom-list-filter-form-query)', function (data) {
            table.reload('LAY-classroom-table', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: data.field
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });
</script>
</body>
</html>
